<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont"
            style="color: #fff">&#xe6ed;</span>
    </div>
    <div class="header-middle">
      <span class="iconfont search-icon">&#xe70a;</span>
      <div class="kw">输入城市/景点/游玩主题</div>
      <input type="text"
             class="header-input">
    </div>
    <div class="header-right">
      城市
      <span class="iconfont">&#xe7ff;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  // ~@ === src css文件加~
.header {
  display: flex;
  height: 0.88rem;
  width: 100%;
  background-color: $bgcolor;

  .header-left {
    width: 0.8rem;
    text-align: center;
    line-height: 0.88rem;
  }

  .header-middle {
    position: relative;
    flex: 1;
    margin: 0.14rem;

    .search-icon {
      position: absolute;
      top: 0.13rem;
      left: 0.2rem;
      color: #e4e7ea;
    }

    .header-input {
      width: 100%;
      height: 100%;
      border-radius: 0.06rem;
    }

    .kw {
      position: absolute;
      top: 0.18rem;
      left: 0.65rem;
      color: #e4e7ea;
    }
  }

  .header-right {
    height: 100%;
    width: 1.32rem;
    text-align: center;
    line-height: 0.88rem;
    color: #fff;
  }
}
</style>
